<template>
<div>
    <TypeNav :isShow="false"/>
     <!-- 主要内容区域 -->
        <section class="con" v-if="details.categoryView">
            <!-- 导航路径区域 -->
            <div class="conPoin">
                <div class="conPoin">
                    <a href="###">{{details.categoryView.category1Name}}</a>
                    <a href="###">{{details.categoryView.category2Name}}</a>
                    <a href="###">{{details.categoryView.category3Name}}</a>
                </div>
            </div>
            <!-- 主要内容区域 -->
            <div class="mainCon">
                <!-- 左侧放大镜区域 -->
                <div class="previewWrap">
                    <Zoom :img="imgUrl"/>
                    <ImgList :carousel="details.skuInfo.skuImageList" @setImg="setImg"/>
                </div>
                <!-- 右侧选择区域布局 -->

                <div class="InfoWrap"> 
                    <div class="goodsDetail">
                    <h3 class="InfoName">{{ skuInfo.skuName }}</h3>
                    <p class="news">{{ skuInfo.skuDesc }}</p>
                    <div class="priceArea">
                        <div class="priceArea1">
                        <div class="title">
                            价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
                        </div>
                        <div class="price">
                            <i>¥</i>
                            <em>{{ skuInfo.price }}</em>
                            <span>降价通知</span>
                        </div>
                        <div class="remark">
                            <i>累计评价</i>
                            <em>65545</em>
                        </div>
                        </div>
                        <div class="priceArea2">
                        <div class="title">
                            <i>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</i>
                        </div>
                        <div class="fixWidth">
                            <i class="red-bg">加价购</i>
                            <em class="t-gray"
                            >满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em
                            >
                        </div>
                        </div>
                    </div>
                    <div class="support">
                        <div class="supportArea">
                        <div class="title">
                            支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持
                        </div>
                        <div class="fixWidth">
                            以旧换新，闲置手机回收 4G套餐超值抢 礼品购
                        </div>
                        </div>
                        <div class="supportArea">
                        <div class="title">配 送 至</div>
                        <div class="fixWidth">广东省 深圳市 宝安区</div>
                        </div>
                    </div>
                    </div>

                    <div class="choose">
                    <div class="chooseArea">
                        <div class="choosed"></div>
                        <dl
                        v-for="spuSaleAttr in spuSaleAttrList"
                        :key="spuSaleAttr.id"
                        >
                        <dt class="title">{{spuSaleAttr.saleAttrName }}</dt>
                        <dd
                            changepirce="0"
                            :class="{ active: spuSaleAttrValue.isChecked == 1 }"
                            v-for="spuSaleAttrValue in spuSaleAttr.spuSaleAttrValueList"
                            :key="spuSaleAttrValue.id"
                            @click="
                            changeActive( 
                                spuSaleAttrValue,
                                spuSaleAttr.spuSaleAttrValueList
                            )
                            "
                        >
                            {{ spuSaleAttrValue.saleAttrValueName }}
                        </dd>
                        </dl>
                    </div>
                    <div class="cartWrap">
                        <div class="controls">
                        <input
                            class="itxt"
                            v-model.number="number"
                            type="number"
                        />
                        <a href="javascript:"
                            @click="number++"
                         class="plus">+</a>
                        <a
                            href="javascript:"
                            class="mins"
                            @click="number>1?number--:number=1"
                            >-</a
                        >
                        </div>
                        <div class="add">
                        <!-- 以前咱们的路由跳转：从A路由跳转到B路由，这里在加入购物车，进行路由跳转之前，发请求
                            把你购买的产品的信息通过请求的形式通知服务器，服务器进行相应的存储
                            -->
                        <a @click="addCart">加入购物车</a>
                        </div>
                    </div>
                    </div>
                </div>
            </div>   
        </section> 
        <ProductDetail/>
        <Like/>
</div>
</template>
<script>    
import ProductDetail from './ProductDetail/'
import ImgList from './ImgList/'
import Like from './Like/'
import Zoom from './Zoom'
import {mapGetters,mapState} from 'vuex'

export default {
    data(){
        return{
            imgUrl:'',
            number:1
        }
    },
    methods:{
        reqDetail(){    
            const skuid=this.$route.params.id
            this.$store.dispatch('getDetail',skuid)
        },
        setImg(img){
            this.imgUrl=img
        },
        changeActive(attr,attrlist){
            attrlist.forEach(att => {
                att.isChecked=0
            });
            attr.isChecked=1
            console.log(this.spuSaleAttrList)
        },
        async addCart(){
            try{
               await this.$store.dispatch('addCart',{skuId:this.$route.params.id,skuNum:this.number})
               sessionStorage.setItem('skuInfo',JSON.stringify(this.skuInfo))
               this.$router.push({path :"/addcartsuccess",query:{skuNum:this.number}})
            }catch(error){  
                alert('加入购物车失败请稍后再试')
            }
        }
    },
    mounted(){
      this.reqDetail()
    },
    components:{
        ProductDetail,
        Like,
        ImgList,
        Zoom
    },
    computed:{
        ...mapState({details:function (state){
            if(state.detail.details.skuInfo){
                    this.imgUrl=state.detail.details.skuInfo.skuDefaultImg
            }
            return state.detail.details
        }}),
        ...mapGetters(['skuInfo','spuSaleAttrList']),
    }
}
</script>
<style lang="less" scoped>
.con{
        width: 1200px;
        margin: 15px auto 0;
        .conPoin{
            padding: 9px 15px 9px 0;
            &>a + a:before {
                content: "/\00a0";
                padding: 0 5px;
                color: #ccc;
            }
        }
        .mainCon{
            overflow: hidden;
            margin: 5px 0 15px;
            .previewWrap{
                float: left;
                width: 400px;
                position: relative;
                
                
            }
            .InfoWrap{
                width: 700px;
                float: right;
                .InfoName{
                    font-size: 14px;
                    line-height: 21px;
                    margin-top: 15px;
                }
                .news{
                    color: #e12228;
                    margin-top: 15px;
                }
                .priceArea {
                    background: #fee9eb;
                    padding: 7px;
                    margin: 13px 0;
                    .priceArea1{
                        overflow: hidden;
                        line-height: 28px;
                        margin-top: 10px;
                        .title {
                            float: left;
                            margin-right: 15px;
                        }
                        .price {
                            float: left;
                            color: #c81623;
                            i {
                                font-size: 16px;
                            }
                            em {
                                font-size: 24px;
                                font-weight: 700;
                            }
                            span {
                                font-size: 12px;
                            }
                        }
                        .remark{
                            float: right;
                        }
                    }
                    .priceArea2{
                        overflow: hidden;
                        line-height: 28px;
                        margin-top: 10px;
                        .title {
                            margin-right: 15px;
                            float: left;
                        }
                        .fixWidth {
                            width: 520px;
                            float: left;
                            .red-bg {
                                background: #c81623;
                                color: #fff;
                                padding: 3px;
                            }
                            .t-gray {
                                color: #999;
                            }
                        }
                    }
                   
                    
                }
                .support {
                    border-bottom: 1px solid #ededed;
                    padding-bottom: 5px;
                    .supportArea {
                        overflow: hidden;
                        line-height: 28px;
                        margin-top: 10px;
                        .title {
                            margin-right: 15px;
                            float: left;
                        }
                        .fixWidth{
                            width: 520px;
                            float: left;
                            color: #999;
                        }
                    }
                }
                .choose{
                    .chooseArea{
                        overflow: hidden;
                        line-height: 28px;
                        margin-top: 10px;
                        .active{
                                color: red;
                        }
                        .choosed{
                            mark{
                                height: 30px;
                                display: inline-block;
                                line-height: 30px;
                                background-color: snow;
                                border: 1px solid #ddd;
                                padding: 0 20px;
                                margin-right: 20px;
                                a{
                                    font-size: 12px;
                                    color: red;
                                    margin-left: 20px;
                                    cursor: pointer;
                                }
                            }
                            
                        }
                        dl{
                            overflow: hidden;
                            margin: 13px 0;
                            dt{
                                margin-right: 15px;
                                float: left;
                            }
                            dd{
                                float: left;
                                margin-right: 5px;
                                color: #666;
                                line-height: 24px;
                                padding: 2px 14px;
                                border-top: 1px solid #eee;
                                border-right: 1px solid #bbb;
                                border-bottom: 1px solid #bbb;
                                border-left: 1px solid #eee;
                            }
                        }     
                    }
                    .cartWrap{
                        .controls{
                            width: 48px;
                            position: relative;
                            float: left;
                            margin-right: 15px;
                            .itxt {
                                width: 38px;
                                height: 37px;
                                border: 1px solid #ddd;
                                color: #555;
                                float: left;
                                border-right: 0;
                                text-align: center;
                            }
                            .plus, .mins{
                                width: 15px;
                                text-align: center;
                                height: 17px;
                                line-height: 17px;
                                background: #f1f1f1;
                                color: #666;
                                position: absolute;
                                right: -8px;
                                border: 1px solid #ccc;
                            }
                            .mins {
                                right: -8px;
                                top: 19px;
                                border-top: 0;
                            }
                            .plus{
                                right: -8px;
                            }
                        }
                        .add{
                            float: left;
                            a{
                                background-color: #e1251b;
                                padding: 0 25px;
                                font-size: 16px;
                                color: #fff;
                                height: 36px;
                                line-height: 36px;
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }
    
   
</style>